<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body, html {
            width: 100%;
            height: 100%;
            margin: 0;
        }
    </style>

<script defer>
    var videos;
    var arrays = []
    var loadVideoFlag = 0
  const source = new EventSource('/sse');

  source.onmessage = (event) => {

    const data = JSON.parse(event.data);
    // console.log(data)
    videos = data
    // console.log(data)
    // const message = data.message;

    // events.innerHTML += `<p>${JSON.parse(JSON.toString())}</p>`;
    // console.log(arrays)
    arrays = []
    Object.keys(videos).forEach((items,index) => {
            // console.log(JSON.parse(data)[items])
            
            arrays.push(
                {
                    name: items,
                    url: videos[items]
                }
            )
            // loadVideoFlag = 1
        });

        var videoObject = document.getElementById("video")
        // console.log(videoObject)
        
        if(!loadVideoFlag)videoObject.src = arrays[0].url
        loadVideoFlag = 1
  };     

  
</script>
</head>
<body>
    
    <main style="
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;">
        <div>
            <video id="video" controls preload="auto" autoplay></video>
        </div>
        
    </main>

    <script>
        // var videoObject = document.getElementById("video")
        // console.log(videoObject)
        // videoObject.src = arrays[0].url
        // function playVideo(){
        //         var videoObject = document.getElementById("video")
        //             console.log(videoObject)
        //             videoObject.src = arrays[0].url
        //     }
    </script>
</body>
</html>